<template>
  <div class="coder-container">
    <Editor @result="getResult"
            @show="getShow" />
    <Output :result="result" />
    <Help v-show="show"
          @show="getShow" />
  </div>
</template>

<script>
import Editor from './components/Editor/index'
import Output from './components/Output'
import Help from './components/Help'

export default {
  name: 'Coder',
  data () {
    return {
      result: {},
      show: false
    }
  },
  components: { Editor, Output, Help },
  methods: {
    getResult (val) {
      this.result = val
    },
    getShow (val) {
      this.show = val
    }
  }
}
</script>

<style lang="stylus" scoped >
@import '~styles/varibles.styl'

.coder-container
  display flex
  flex-direction row
  justify-content space-around
  align-items center
  width 90%
  margin 0 auto
  min-height 'calc(100vh - %s - %s)' % (navbar-height footer-height)
</style>
